<template>
	<div class="view">
		<div class="header">
			<div class="h_left" @click="toUrl('/')">
				<div class="logo">
					<!-- <img src="../assets/image/logo.png" alt=""> -->
				</div>
				<div>青年和大学生就业集市系统管理</div>
			</div>
			<div class="h_right">
				<!-- <div class="h_li" @click="toUrl('/major')" v-if="team=='*'">
					<div class="li_icon">
						<i class="i-c-icon12 i-16 i-mr-6"></i>
					</div>
					<div class="li_cnt">数据管理</div>
				</div>
				<div class="h_li" @click="toUrl('/user')" >
					<div class="li_icon">
						<i class="i-c-icon13 i-16 i-mr-6"></i>
					</div>
					<div class="li_cnt">账号管理</div>
				</div> -->
				<div class="h_li">
					<el-dropdown @command="doapClick">
						<span class="el-dropdown-link">
							{{userInfo.adminname}}<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="exit">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>

			</div>
		</div>

		<div class="main" :style="{minHeight:minHeight+'px'}">
			<div class="main_con">
				<div class="main_title">服务分类</div>
				<div class="cata_box">
					<div class="cata_item" @click="toUrl('/server/chuangye')">
						<div class="cata_icon">
							<i class="i-c-icon17 i-60 i-mr-10"></i>
						</div>
						<div class="cata_detail">
							<div class="cata_title">创业空间</div>
							<div class="cata_title2">Entrepreneurial space</div>
						</div>
					</div>
					<div class="cata_item" @click="toUrl('/server/zhaopin')">
						<div class="cata_icon">
							<i class="i-c-icon17 i-60 i-mr-10"></i>
						</div>
						<div class="cata_detail">
							<div class="cata_title">招聘活动</div>
							<div class="cata_title2">Recruitment activity</div>
						</div>
					</div>
					<div class="cata_item" @click="toUrl('/server/zhengwu')">
						<div class="cata_icon">
							<i class="i-c-icon17 i-60 i-mr-10"></i>
						</div>
						<div class="cata_detail">
							<div class="cata_title">政务服务</div>
							<div class="cata_title2">Government service</div>
						</div>
					</div>
					<div class="cata_item" @click="toUrl('/server/zhandian')">
						<div class="cata_icon">
							<i class="i-c-icon17 i-60 i-mr-10"></i>
						</div>
						<div class="cata_detail">
							<div class="cata_title">站点导航</div>
							<div class="cata_title2">Site navigation</div>
						</div>
					</div>
					<div class="cata_item" @click="toUrl('/server/jishi')">
						<div class="cata_icon">
							<i class="i-c-icon17 i-60 i-mr-10"></i>
						</div>
						<div class="cata_detail">
							<div class="cata_title">集市活动</div>
							<div class="cata_title2">Market activity</div>
						</div>
					</div>
					<div class="cata_item" @click="toUrl('/server/jineng')">
						<div class="cata_icon">
							<i class="i-c-icon17 i-60 i-mr-10"></i>
						</div>
						<div class="cata_detail">
							<div class="cata_title">技能培训</div>
							<div class="cata_title2">Skill training</div>
						</div>
					</div>
					<div class="cata_item" @click="add2(utilData.jiuyeCataname)">
						<div class="cata_icon">
							<i class="i-c-icon17 i-60 i-mr-10"></i>
						</div>
						<div class="cata_detail">
							<div class="cata_title">就业指导</div>
							<div class="cata_title2">Employment guidance</div>
						</div>
					</div>
					<div class="cata_item" @click="add(utilData.daijiaoCataname)">
						<div class="cata_icon">
							<i class="i-c-icon17 i-60 i-mr-10"></i>
						</div>
						<div class="cata_detail">
							<div class="cata_title">带教服务</div>
							<div class="cata_title2">Teaching service</div>
						</div>
					</div>
					<div class="cata_item" @click="add(utilData.baoxianCataname)">
						<div class="cata_icon">
							<i class="i-c-icon17 i-60 i-mr-10"></i>
						</div>
						<div class="cata_detail">
							<div class="cata_title">保险超市</div>
							<div class="cata_title2">Insurance supermarket</div>
						</div>
					</div>
					<div class="cata_item" @click="toUrl('/server/weiquan')">
						<div class="cata_icon">
							<i class="i-c-icon17 i-60 i-mr-10"></i>
						</div>
						<div class="cata_detail">
							<div class="cata_title">维权咨询</div>
							<div class="cata_title2">Rights protection consulting</div>
						</div>
					</div>
					<div class="cata_item" @click="toUrl('/server/changdi')">
						<div class="cata_icon">
							<i class="i-c-icon17 i-60 i-mr-10"></i>
						</div>
						<div class="cata_detail">
							<div class="cata_title">场地预约</div>
							<div class="cata_title2">Venue reservation</div>
						</div>
					</div>
				</div>
				
			</div>
		</div>
		
		<Footer></Footer>

		<div class="bj1 bj"></div>
		<div class="bj2 bj"></div>

		<el-drawer :visible.sync="drawer" :direction="direction" size="50%" :wrapperClosable="false">
			<template slot="title">
				<div class="h_exit" @click="drawer = false">
					<i class="i-16 i-exit i-mr-6"></i>返回
				</div>
			</template>
			<div class="d_container">
				<el-form label-position="top" ref="form" :model="form" :rules="rules">
					<div class="main_view">
						<div class="v_title">栏目： {{ form.cataname }}</div>
						<div class="v_box">
							<el-form-item label="" prop="cnt">
								<vue-ueditor-wrap :config="editorConfig" v-model="form.cnt" style="width: 98%;">
								</vue-ueditor-wrap>
							</el-form-item>
						</div>
					</div>
				</el-form>
			</div>
			<div class="d_bottom">
				<div class="d_btn">
					<el-button size="small" plain @click="drawer = false">返回</el-button>
				</div>
				<div class="d_btn">
					<el-button size="small" type="primary" @click="submitForm('form')" :disabled="addTrue">保存
					</el-button>
				</div>
			</div>
		</el-drawer>
		<el-drawer :visible.sync="drawer2" :direction="direction2" size="50%" :wrapperClosable="false">
			<template slot="title">
				<div class="h_exit" @click="drawer2 = false">
					<i class="i-16 i-exit i-mr-6"></i>返回
				</div>
			</template>
			<div class="d_container">
				<el-form label-position="top" ref="form2" :model="form2" :rules="rules2">
					<div class="main_view">
						<div class="v_box">
							<!-- <el-form-item label="标题" prop="title">
								<el-input v-model="form2.title" placeholder="请输入标题" style="width: 400px;"></el-input>
							</el-form-item> -->
							<el-form-item label="APPID" prop="url">
								<el-input placeholder="请输入APPID" v-model="form2.url" style="width: 400px;"></el-input>
							</el-form-item>
							<el-form-item label="页面地址" prop="path">
								<el-input placeholder="请输入页面地址" v-model="form2.path" style="width: 400px;"></el-input>
							</el-form-item>
						</div>
					</div>
				</el-form>
			</div>
			<div class="d_bottom">
				<div class="d_btn">
					<el-button size="small" plain @click="drawer2 = false">返回</el-button>
				</div>
				<div class="d_btn">
					<el-button size="small" type="primary" @click="submitForm('form2')" :disabled="addTrue">保存
					</el-button>
				</div>
			</div>
		</el-drawer>

	</div>
</template>

<script>
import Footer from "../../components/footer.vue"
import utilData from "../../util/data.js"
import {mapState} from "vuex"
	export default {
		components:{Footer},
		data() {
			return {
				height: document.documentElement.clientHeight,
				minHeight: document.documentElement.clientHeight-192,
				data:{},
				
				dayList:[],// 日期列表
				valList:[],// 日期数据
				
				majorStr:[],// 专业名称
				majorValue:[],// 专业值
				
				team:"",// 权限角色
				
				user:{},// 角色数据
				drawer:false,
				direction: 'rtl',
				editorConfig: {
					elementPathEnabled: false,
					// 你的UEditor资源存放的路径,相对于打包后的index.html
					UEDITOR_HOME_URL: "@/../../static/ueditor/",
					// 编辑器不自动被内容撑高
					autoHeightEnabled: false,
					// 初始容器高度
					initialFrameHeight: 600,
					// 初始容器宽度
					initialFrameWidth: "100%",
					// 上传文件接口
					// serverUrl: '/oss/uploadfile/',
					// 关闭自动保存
					enableAutoSave: false,
					// 自定义工具栏，需要额外选项可以参考ueditor.config.js
					abc: {},
				},
				form:{
					cataname:"",
					cnt:"",
				},
				rules: {
					cnt: [
						{ required: true, message: '请输入内容', trigger: ['blur,change'] }
					]
				},
				addTrue:false,
				utilData:utilData,

				drawer2:false,
				direction2:'rtl',
				form2:{
					title:"",
					url:"",
					path:"",
					cataname:"",
				},
				rules2: {
					url: [
						{ required: true, message: '请输入APPID', trigger: ['blur,change'] }
					],
					path: [
						{ required: true, message: '请输入页面地址', trigger: ['blur,change'] }
					]
				},
			}
		},
		computed:{
			...mapState(['userInfo']),
		},
		methods: {
			add(cataname){
				this.$http({
					url: this.$api.serveContentDetail,
					method: 'post',
					data:{
						cataName:cataname
					}
				}).then(res => {
					if (res.data.code == 20000) {
						const detail = res.data.data.detail;
						if(detail){
							this.form.id = detail.id
							this.form.cataname = detail.cataname
							this.form.cnt = detail.cnt
						}else{
							this.form.id = null
							this.form.cataname = cataname
							this.form.cnt = ""
						}
						
						this.drawer = true

					}else{
						this.$message.success(res.data.message)
					}
				})
			},
			add2(cataname){
				this.$http({
					url: this.$api.serveContentDetail,
					method: 'post',
					data:{
						cataName:cataname
					}
				}).then(res => {
					if (res.data.code == 20000) {
						const detail = res.data.data.detail;
						if(detail){
							this.form2.id = detail.id
							this.form2.cataname = detail.cataname
							this.form2.cnt = detail.cnt
							this.form2.url = detail.url
							this.form2.path = detail.path
						}else{
							this.form2.id = null
							this.form2.cataname = cataname
							this.form2.cnt = ""
							this.form2.url = ""
							this.form2.path = ""
						}
						
						this.drawer2 = true

					}else{
						this.$message.success(res.data.message)
					}
				})
			},
			
			doapClick(e){
				if(e=='exit'){
					this.$store.commit("outLogin");
					this.$router.push("/sign")
				}
			},
			
			// 路由跳转
			toUrl(url){
				this.$router.push(url)
			},
			
			getUser(){
				this.$http({
					'method':'get',
					'url':this.$api.adminMy,
				}).then(res =>{
					if(res.data.code==20000){
						this.$store.commit("setUserInfo",res.data.data.detail)
					}
				})
			},
			// 表单验证
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if(formName=="form2"){
							this.upload2()
						}else{
							this.upload()
						}
					}
				});
			},
			// 上传
			upload() {
				this.addTrue = true

				let url = ""
				let data
				const id = this.form.id
				if(id){
					url = this.$api.serveContentEdit
					data = this.form
				}else{
					url = this.$api.serveContentAdd
					data = {...this.form}
				}

				this.$http({
					'method': 'post',
					'url': url,
					data: data
				}).then(res => {

					if (res.data.code == 20000) {
						this.drawer = false
						this.$refs.form.resetFields()
						this.$message({
							message: res.data.message,
							type: 'success'
						})

					} else {
						this.$message.error(res.data.message)
					}
					this.addTrue = false
				})

			},
			// 上传
			upload2() {
				this.addTrue = true

				let url = ""
				let data
				const id = this.form2.id
				if(id){
					url = this.$api.serveContentEdit
					data = this.form2
				}else{
					url = this.$api.serveContentAdd
					data = {...this.form2}
				}

				this.$http({
					'method': 'post',
					'url': url,
					data: data
				}).then(res => {

					if (res.data.code == 20000) {
						this.drawer2 = false
						this.$refs.form2.resetFields()
						this.$message({
							message: res.data.message,
							type: 'success'
						})

					} else {
						this.$message.error(res.data.message)
					}
					this.addTrue = false
				})

			},
		
		},
		created() {
			if(Object.keys(this.userInfo).length==0){
				this.getUser()
			}
		}
	}
</script>

<style scoped>
	@import url("../../assets/css/index.css");
	@import url("../../assets/css/drawer.css");
	>>>.el-drawer__close-btn .el-icon {
		display: block;
	}
	>>>.el-drawer__header>:first-child{
		display: flex;
	}
	.v_title{
		margin-top: 0px;
		margin-bottom: 20px;
	}
	>>>.v-modal{
		z-index: 1098px;
	}
</style>
